<template>
	<view class="box">
		<view class="title">
			<view class="text">
				<text class="type">填空题</text>
				<span style="word-break: break-all;word-wrap: break-word;">{{info}}、{{examItem.examSubject.title}}</span>
			
			</view>
		</view>
		<view class="footer">
			<view class="left">
				<view class="left-top">本题分数：{{examItem.subjectScore}}分</view>
				<view>考生答案：<span
						:class="examItem.rightFlag==2?'fail-color':'pass-color'">{{examItem.answerArray[0]?examItem.answerArray.join('|') : '未答题'}}</span>
				</view>
			</view>
			<view class="left">
				<view class="left-top">考生得分：{{examItem.score}}分</view>
				<view>本题答案：<span class="pass-color">{{examItem.examSubject.answerArray.join('|')}}</span></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['examItem', 'info'],
		data() {
			return {}
		},
		onLoad() {

		},
		methods: {}
	}
</script>


<style scoped lang="scss">
	.box {
		padding: 40rpx 32rpx;
		border-bottom: 2rpx solid #F2F2F2;

		.title {
			font-size: 32rpx;
			font-weight: 400;
			margin-bottom: 32rpx;
			display: flex;
			align-items: flex-start;

			.text {
				.type {
					width: 96rpx;
					min-width: 96rpx;
					height: 44rpx;
					line-height: 44rpx;
					margin-right: 10rpx;
					padding: 4rpx 24rpx;
					font-size: 12px;
					font-weight: 400;
					border-radius: 4px;
					color: #10A399;
					background: rgba(16, 163, 153, 0.2);
				}
			}
		}

		.footer {
			display: flex;
			padding: 16rpx 24rpx;
			background-color: #F2F2F2;
			font-size: 28rpx;
			font-weight: 400;
			color: #4D4D4D;

			.left {
				margin-right: 24rpx;
				min-width: 112px;

				.left-top {
					margin-bottom: 16rpx;
				}

				.pass-color {
					color: #28B869;
					word-break: break-all;
					word-wrap: break-word;
				}

				.fail-color {
					color: #FF4D4D;
					word-break: break-all;
					word-wrap: break-word;
				}
			}
		}
	}
</style>